<template>
  <div>
    <el-row :span="24" style="margin:26px 0 0;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
        <el-form-item label="订单类型">
          <el-select v-model="formInline.orderType" style="width: 150px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="当面付订单" value="payToPay"></el-option>
            <el-option label="城主订单" value="buyCity"></el-option>
            <el-option label="商品订单" value="addShopOrder"></el-option>
            <el-option label="套餐订单" value="buyVoucher"></el-option>
            <el-option label="酒店订单" value="addShopHotelOrder"></el-option>
            <el-option label="创客订单" value="upperMarker"></el-option>
            <el-option label="发红包" value=" sendRed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width:180px;"></el-date-picker>
          到
          <el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="订单ID"><el-input v-model="formInline.orderId" style="width: 150px;"></el-input></el-form-item>
        <el-form-item label="商家名称"><el-input v-model="formInline.storeName" style="width: 150px;"></el-input></el-form-item>
        <el-button type="primary" @click="fetchData(1)">查询</el-button>
        <el-button type="primary" @click="deriveSubmit">导出</el-button>
      </el-form>
    </el-row>
    <el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe height="500" style="width: 100%">
      <!--      <el-table-column
        label="订单ID"
        width="150"
        prop='orderId'>
      </el-table-column> -->
      <el-table-column label="用户ID" width="140">
        <template scope="scope">
          <router-link :to="'/user/user_detail/' + scope.row.userId" target="_blank">
            <span class="pointer">{{ scope.row.userId }}</span>
          </router-link>
        </template>
      </el-table-column>
      <!--    <el-table-column
        width="150"
        label="本地商户编号" prop='storeId'>
      </el-table-column> -->
      <el-table-column width="130" label="订单ID" prop="orderId"></el-table-column>
      <el-table-column width="90" label="支付类型" prop="orderType"></el-table-column>
      <el-table-column width="130" label="店铺ID" prop="storeId"></el-table-column>
      <el-table-column label="商家名称" prop="storeName"></el-table-column>
      <el-table-column width="100" label="应付金额" prop="amount"></el-table-column>
      <el-table-column width="200" label="支付时间" prop="payTime"></el-table-column>
      <el-table-column width="100" label="订单状态" prop="statusZh"></el-table-column>
      <el-table-column label="红包股数量" prop="redAmt"></el-table-column>
      <el-table-column label="抵用币金额" prop="offsetAmt"></el-table-column>
      <el-table-column label="实际付款金额" prop="actualAmt"></el-table-column>
      <el-table-column label="会员卡金额" prop="sysAmt"></el-table-column>
      <el-table-column width="100" label="平台收益" prop="platformAmt"></el-table-column>
      <el-table-column width="110" label="订单时间" prop="payTime"></el-table-column>
      <el-table-column width="150" label="商品名称" :show-overflow-tooltip="true" prop="subject"></el-table-column>
      <el-table-column label="支付方式" prop="payMethod"></el-table-column>
    </el-table>
    <div class="paginate">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-size="pageInfo.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pageInfo.count"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderList',
  data() {
    return {
      table_loading: true,
      formInline: {
        orderType: '',
        orderId: '',
        startTime: '',
        endTime: '',
        storeName: ''
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 20,
        count: 1,
        dtos: []
      },
      platformStat: {
        inAmt: 0,
        outAmt: 0,
        lastAmt: 0
      },
      startTime: '',
      endTime: ''
    };
  },
  mounted() {
    let vm = this;
    vm.fetchData(vm.pageInfo.pageNum);
  },
  methods: {
    /**
     * @Description: 获取订单列表及查询
     * @author liuChen
     * @date 2020-09-08 10:22
     */
    fetchData(page = 1) {
      let vm = this;
      vm.table_loading = true;
      if (vm.startTime && vm.endTime) {
        vm.formInline.startTime = dateFormat(vm.startTime);
        vm.formInline.endTime = dateFormat(vm.endTime);
        console.log('=========== order list', vm.formInline)
        if (vm.formInline.startTime > vm.formInline.endTime) {
          vm.$message({
            type: 'warning',
            message: '开始时间不能大于结束时间'
          });
          vm.table_loading = false;
          return;
        }
      } else {
        vm.formInline.startTime = '';
        vm.formInline.endTime = '';
      }
      if (vm.startTime && !vm.endTime) {
        vm.$message({
          type: 'warning',
          message: '请选择结束时间'
        });
        vm.table_loading = false;
        return;
      }
      if (!vm.startTime && vm.endTime) {
        vm.$message({
          type: 'warning',
          message: '请选择开始时间'
        });
        vm.table_loading = false;
        return;
      }
      // vm.table_loading = true
      vm.pageInfo.pageNum = page;
      vm.formInline.pageNum = page;
      vm.formInline.isNewStore = '2';
      // console.log('=========== order list', vm.formInline)
      vm.dataApi.ajax('selectKjtPay', vm.formInline, res => {
        vm.table_loading = false;
        let data = JSON.parse(JSON.stringify(res));
        /**
         * 订单状态说明：
         *  支付完成 - PAY_FINISHED  TRADE_SUCCESS  TRADE_FINISHED  close
         *  支付中 - p
         *  空 - 空字符串
         * */
        for (var i = 0; i < data.dtos.length; i++) {
          data.dtos[i].statusZh =
            ['PAY_FINISHED', 'TRADE_SUCCESS', 'TRADE_FINISHED', 'close'].indexOf(data.dtos[i].status) > -1 ? '支付完成' : data.dtos[i].status == 'p' ? '支付中' : '';
        }
        console.log('返回数',data)
        vm.pageInfo.dtos = data.dtos;
        vm.pageInfo.count = data.count;
        vm.getPlatformStat();
      });
    },
    getPlatformStat() {
      let vm = this;
      vm.dataApi.ajax('sumKjtPay', vm.formInline, res => {
        vm.platformStat.inAmt = res.inAmt;
        vm.platformStat.lastAmt = res.lastAmt;
        vm.platformStat.outAmt = res.outAmt;
      });
    },
    /**
     * @Description: 列表翻页
     * @author liuChen
     * @date 2020-09-08 10:35
     */
    handleCurrentChange(val) {
      this.fetchData(val);
    },
    dateString(date) {
      let year = date.toLocaleDateString().substring(0, 4);
      let month = date.toLocaleDateString().substring(5, 6);
      let day = date.toLocaleDateString().substring(7, 9);
      if (day < 10) {
        day = '0' + day;
      }
      if (month < 10) {
        month = '0' + month;
      }
      return year + '-' + month + '-' + day;
    },
    deriveSubmit() {
      let vm = this;
      let startTime = '';
      let endTime = '';
      let orderType = vm.formInline.orderType;
      let orderId = vm.formInline.orderId;

      if (vm.startTime && vm.endTime) {
        if (vm.startTime > vm.endTime) {
          this.showMsg('开始时间不能大于结束时间', 'warning');
          return;
        }
        startTime = vm.dateString(vm.startTime);
        endTime = vm.dateString(vm.endTime);
      }
      if (vm.startTime && !vm.endTime) {
        startTime = '';
      }
      if (!vm.startTime && vm.endTime) {
        endTime = '';
      }
      // console.log('导出传值数据',startTime,'-',endTime,'-',orderType,'-',orderId);
      let host = 'https://console.hzsuhu.cn/enve/'
      // let host = 'http://192.168.1.161:8080/enve-web/';
      location.href = encodeURI(
        encodeURI(host + 'WithdrawControl/exportkjtPay?startTime=' + startTime + '&endTime=' + endTime + '&orderType=' + orderType + '&orderId=' + orderId + '&isNewStore=2')
      );
    }
  }
};
</script>

<style scoped></style>
